<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="icon" type="image/x-icon" th:href="@{/img/favicon.ico}">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>注册</title>

    <script th:src="@{/js/jquery-3.3.1.js}"></script>
    <script th:src="@{/js/popper.js}"></script>
    <script th:src="@{/js/toolkit.js}"></script>
    <script th:src="@{/js/component.js}"></script>
    <script type="text/javascript">
        function checkUserExist() {
            var email = $("#email").val();
            $.getJSON("/checkUserExist",{email: email}, function (data, state) {
                console.log(state);
                console.log(data);
                if (data !== '') {
                    document.getElementById("email").value = "";
                    document.getElementById("email").placeholder = "账户名已存在";
                    document.getElementById("email").parentNode.className = "input-group form-group input-with-icon col-md-4 has-error";
                    return false;
                } else {
                    return true;
                }
            })
        }

        function checkUser() {
            var email = document.getElementById("email");
            var pattern = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if(email.value === "") {
                email.parentNode.className = "input-group form-group input-with-icon col-md-4 has-error";
                document.getElementById("email").placeholder = "邮箱不能为空";
                return false;
            } else if(!pattern.test(email.value)) {
                email.parentNode.className = "input-group form-group input-with-icon col-md-4 has-error";
                document.getElementById("email").value = "";
                document.getElementById("email").placeholder = "邮箱格式不正确";
                return false;
            } else if(checkUserExist()) {
                email.parentNode.className = "input-group form-group input-with-icon col-md-4 has-error";
                return false;
            } else {
                email.parentNode.className = "input-group form-group input-with-icon col-md-4";
                return true;
            }
        }

        function checkPassword() {
            var password = document.getElementById("password");
            var pattern = /^\w{6,16}$/;
            if(password.value === "") {
                password.parentNode.className = "input-group form-group input-with-icon col-md-4 has-error";
                document.getElementById("password").placeholder = "密码不能为空";
                return false;
            } else if (!pattern.test(password.value)) {
                password.parentNode.className = "input-group form-group input-with-icon col-md-4 has-error";
                document.getElementById("password").value = "";
                document.getElementById("password").placeholder = "密码长度应为6-16位";
                return false;
            } else {
                password.parentNode.className = "input-group form-group input-with-icon col-md-4";
                return true;
            }
        }

        function checkConfirm() {
            var confirm = document.getElementById("confirm");
            var password = document.getElementById("password");
            if (confirm.value === "") {
                confirm.parentNode.className = "input-group form-group input-with-icon col-md-4 has-error";
                document.getElementById("confirm").placeholder = "确认密码不能为空";
                return false;
            } else if (confirm.value !== password.value) {
                confirm.parentNode.className = "input-group form-group input-with-icon col-md-4 has-error";
                document.getElementById("confirm").value = "";
                document.getElementById("confirm").placeholder = "确认密码与密码不匹配";
                return false;
            } else {
                confirm.parentNode.className = "input-group form-group input-with-icon col-md-4";
                return true;
            }
        }

        function checkPhone() {
            var phone = document.getElementById("phone");
            var pattern = /^1[35678]\d{9}$/;
            if (phone.value === "") {
                phone.parentNode.className = "row input-group col-md-4 col-md-offset-4 has-error";
                document.getElementById("phone").placeholder = "手机号码不能为空";
                return false;
            } else if (!pattern.test(phone.value)) {
                phone.parentNode.className = "row input-group col-md-4 col-md-offset-4 has-error";
                document.getElementById("phone").value = "";
                document.getElementById("phone").placeholder = "手机号码格式不正确";
                return false;
            } else {
                phone.parentNode.className = "row input-group col-md-4 col-md-offset-4";
                return true;
            }
        }

        function checkName() {
            var name = document.getElementById("name");
            if (name.value === "") {
                name.parentNode.className = "input-group form-group input-with-icon col-md-4 has-error";
                document.getElementById("name").placeholder = "姓名不能为空";
                return false;
            } else {
                name.parentNode.className = "input-group form-group input-with-icon col-md-4";
                return true;
            }
        }

        function checkForm() {
            return (checkUser() && checkPassword() && checkConfirm() && checkPhone() && checkName());
        }
    </script>

    <link th:href="@{/css/antd.css}" rel="stylesheet">
    <link th:href="@{/css/docs.css}" rel="stylesheet">
    <link th:href="@{/css/toolkit-light.css}" rel="stylesheet">

    <style>
        .bg {
            background: #EDEDED;
        }

        .card-img-top {
            width: 15%;
            border-top-left-radius: calc(0.25rem - 1px);
            border-top-right-radius: calc(0.25rem - 1px);
        }

        .docs-example {
            background-color: white;
            border-color: white;
        }

        .up {
            z-index: 10;
        }

        .col-center-block {
            float: none;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .top {
            margin-top: 6px;
        }
    </style>
</head>
<body class="bg">
    <div class="container">
        <!--logo-->
        <div class="row text-md-center">
            <img th:src="@{/img/ahza-black-oj.png}" class="card-img-top"/>
        </div>

        <!--注册表单-->
        <div class="row text-md-center docs-example">
            <div class="container">
                <div class="row text-md-left">
                    <h2>使用邮箱注册</h2>
                </div>
                <div class="row">
                    <div class="ant-divider ant-divider-horizontal col-md-12">
                        <h3 class="hr-divider-content hr-divider-heading"></h3>
                    </div>
                </div>
                <form action="/doRegister" method="post" class="text-md-center" onsubmit="return checkForm()">
                    <div class="row">
                        <div class="input-group form-group input-with-icon col-md-4">
                            <input class="form-control" type="text" id="email" name="email" placeholder="邮箱地址" onblur="checkUser()">
                            <span class="up icon icon-email"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group form-group input-with-icon col-md-4">
                            <input class="form-control" type="password" id="password" name="password" placeholder="密码" onblur="checkPassword()">
                            <span class="up icon icon-lock-open"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group form-group input-with-icon col-md-4">
                            <input class="form-control" type="password" id="confirm" name="confirm" placeholder="确认密码" onblur="checkConfirm()">
                            <span class="up icon icon-lock"></span>
                        </div>
                    </div>

                    <div class="col-center-block">
                        <div class="row">
                            <div class="hr-divider col-md-4 input-group form-group col-center-block">
                                <h3 class="hr-divider-content hr-divider-heading">
                                    联系手机
                                </h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-group form-group col-md-12 col-center-block">
                                <div class="row input-group col-md-4 col-md-offset-4">
                                    <div class="input-group-addon">+86</div>
                                    <input type="text" class="form-control" id="phone" name="phone" placeholder="手机号码" onblur="checkPhone()">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-group form-group input-with-icon col-md-4">
                                <label class="col-md-1 p-l-0 p-r-0 label_top top" for="clazz">班级</label>
                                <select class="custom-select col-md-11" id="clazz" name="clazz">
                                    <option value="软件1401">软件1401</option>
                                    <option value="软件1402">软件1402</option>
                                    <option value="软件1403">软件1403</option>
                                    <option value="软件1404">软件1404</option>
                                    <option value="软件1405">软件1405</option>
                                    <option value="软件1406">软件1406</option>
                                    <option value="软件1501">软件1501</option>
                                    <option value="软件1502">软件1502</option>
                                    <option value="软件1503">软件1503</option>
                                    <option value="软件1504">软件1504</option>
                                    <option value="软件1505">软件1505</option>
                                    <option value="软件1506">软件1506</option>
                                    <option value="软件1507">软件1507</option>
                                    <option value="软件1508">软件1508</option>
                                    <option value="软件1509">软件1509</option>
                                    <option value="软件1510">软件1510</option>
                                    <option value="软件1511">软件1511</option>
                                    <option value="数媒1501">数媒1501</option>
                                    <option value="数媒1502">数媒1502</option>
                                    <option value="数媒1503">数媒1503</option>
                                    <option value="数媒1504">数媒1504</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-group form-group input-with-icon col-md-4">
                                <input class="form-control" type="name" id="name" name="name" placeholder="姓名" onblur="checkName()">
                                <span class="up icon icon-user"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-group form-group col-md-4 col-center-block">
                                <button type="submit" class="btn btn-primary form-control">注册</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!--跳转登录-->
        <div class="row text-md-center text-md-center">
            <span>已有账号？</span>
            <button onclick="window.location.href='/login'" class="btn btn-link">立即登录</button>
        </div>
    </div>
</body>
</html>